<template>
    <div id="status-bar">
        <div class="box">
            <div class="left">
                <div class="status">
                    {{ statusName }}
                </div>
            </div>
            <div class="center">
                <!-- {{currentBatterylevel}} -->
            </div>
            <div class="right">
              
                <!-- <span v-show="connectOk === 0" @click="reconnect">{{
                    $t("reconnect")
                }}</span>
                <img v-show="connectOk === 1" class="loading" src="../assets/loading.png" />
                <div v-show="connectOk === 2" class="icon lock-container">
                   
                    <div class="battery" v-if="!DarkMode">
                        <img src="../assets/battery/100_72.png" alt="" v-if="currentBatterylevel == 100" />
                        <img src="../assets/battery/81-99_72.png" alt=""
                            v-if="currentBatterylevel < 100 && currentBatterylevel >= 80" />
                        <img src="../assets/battery/61-80_72.png" alt=""
                            v-if="currentBatterylevel < 80 && currentBatterylevel >= 60" />
                        <img src="../assets/battery/41-60_72.png" alt=""
                            v-if="currentBatterylevel < 60 && currentBatterylevel >= 40" />
                        <img src="../assets/battery/21-40_72.png" alt=""
                            v-if="currentBatterylevel < 40 && currentBatterylevel >= 20" />
                        <img src="../assets/battery/0_72.png" alt="" v-if="currentBatterylevel < 20" />
                        <p>{{ currentBatterylevel }}<span>%</span></p>
                    </div>
                    <div class="battery" v-else>
                        <img src="../assets/battery/ic_battery_Dark_100.png" alt="" v-if="currentBatterylevel == 100" />
                        <img src="../assets/battery/ic_battery_Dark_61-80.png" alt=""
                            v-if="currentBatterylevel < 100 && currentBatterylevel >= 80" />
                        <img src="../assets/battery/ic_battery_Dark_41-60.png" alt=""
                            v-if="currentBatterylevel < 80 && currentBatterylevel >= 60" />
                        <img src="../assets/battery/ic_battery_Dark_20-24.png" alt=""
                            v-if="currentBatterylevel < 60 && currentBatterylevel >= 40" />
                        <img src="../assets/battery/ic_battery_Dark_0-20.png" alt=""
                            v-if="currentBatterylevel < 40 && currentBatterylevel >= 20" />
                        <img src="../assets/battery/ic_battery_Dark_0.png" alt="" v-if="currentBatterylevel < 20" />
                        <p>{{ currentBatterylevel }}<span class="baifen">%</span></p>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</template>
  
<script>
import lottie from "lottie-web";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
    data () {
        return {
            isSwitching: false,
            tempSwitchOn: 0,
            chargeStatus:0
        };
    },
    computed: {
        ...mapState([
            "connectOk",
            "bleOn",
            "battery",
            "num",
            "NoControl",
            "darkMode",
        ]),
        ...mapState({
            status: (state) => state.status.status,
            Switch: (state) => state.switch.on,
            DarkMode: (state) => state.darkMode,
            BatteryLevel: (state) => state.battery.capacity,
           
        }),
        ...mapGetters(["imgPath", "canControl"]),

        statusName () {
            console.hLog("连接状态:" + this.connectOk);
            if (this.connectOk === 0) {
                return this.$t("no_connect");
            } else if (this.connectOk === 1) {
                return this.$t("connecting");
            } else if (this.connectOk === 2) {
                console.hLog("当前设备电量：", this.BatteryLevel);
                if (this.Switch) {
                    if (this.chargeStatus == 1) {
                        return this.$t("chongdianzhong"); //充电中
                    } else if (this.chargeStatus == 2) {
                        return this.$t("chongman"); //已开启
                    } else {
                        return this.$t("connected"); //已开启
                    }
                }
                return this.$t("connected"); //已连接
            }
        },

        currentBatterylevel () {
            if (this.connectOk === 2) {
                return this.BatteryLevel;
            }
        },
        lottieParam () {
            const Range = [0, 229],
                StatusOff = 0,
                StatusOn = 114,
                OpenStart = [1, 46],
                OpenLoading = [46, 70],
                OpenEnd = [70, StatusOn],
                CloseStart = [152, 186],
                CloseLoading = [186, 195],
                CloseEnd = [195, 229];
            return {
                range: Range,
                status: this.tempSwitchOn ? StatusOn : StatusOff,
                start: this.tempSwitchOn ? CloseStart : OpenStart,
                loading: this.tempSwitchOn ? CloseLoading : OpenLoading,
                end: !this.tempSwitchOn ? CloseEnd : OpenEnd, // end状态时tempswitchOn数据已改
            };
        },
    },
    watch: {
        Switch (val) {
            //profile,开关状态
            if (this.tempSwitchOn !== val) {
                this.tempSwitchOn = val;
                this.updateSwitch();
            }
        },
    },
    methods: {
        ...mapMutations(["UPDATE_STATE"]),
        ...mapActions([
            "connectBle",
            "disconnectBle",
            "subscribeBleEvent",
            "sendCommand",
        ]),
        // 重新连接
        reconnect () {
            if (!this.bleOn) {
                this.$store.dispatch("openBluetoothAdapter");
                return;
            }

            // 规避重连失败，需要先断连再重连
            this.disconnectBle().then((res = {}) => {
                this.subscribeBleEvent();
                this.connectBle();
                // 记录重新连接的次数
                this.UPDATE_STATE({
                    name: "isReconnect",
                    value: true,
                });
            });
        },
        //控制设备开关
        controlAppliance () {
            //判断是否在控制状态
            if (this.NoControl) {
                this.sendCommand({
                    data: {
                        sid: "switch",
                        data: {
                            on: Number(!this.Switch),
                        },
                    },
                })
                    .then(() => {
                        this.lottieAnimation.playSegments(this.lottieParam.start, true);
                        this.lottieAnimation.playSegments(this.lottieParam.loading, false);
                        this.tempSwitchOn = 1 - this.tempSwitchOn;
                    })
                    .finally(() => {
                        this.lottieAnimation.loop = false; //循环执行
                        this.lottieAnimation.playSegments(this.lottieParam.end, false);
                    });
            }
        },
        //动画加载
        initAnimation () {
            this.lottieAnimation = lottie.loadAnimation({
                container: this.$refs.switchIcon,
                animationData: this.darkMode
                    ? require("../assets/dark/switch_dark.json")
                    : require("../assets/switch.json"),
                renderer: "svg",
                loop: false,
                autoplay: true,
            });
        },
        //动画显示
        updateSwitch () {
            this.lottieAnimation.playSegments(this.lottieParam.range, true);
            this.lottieAnimation.goToAndStop(this.lottieParam.status, true);
        },
    },
    mounted () {
        setTimeout(() => {
            this.tempSwitchOn = this.Switch;
            this.initAnimation();
            this.updateSwitch();
        }, 10);
    },
};
</script>
  
<style lang='less' scoped>
@import url("../style/public.less");

@media only screen and (min-width: 600px) {
    #status-bar {
        .box {
            padding: 0 !important;
        }
    }
}

#status-bar {
    @media only screen and (min-width: 800px) {
        .box {
            margin: 0 2.4rem 1.2rem !important;
            display: flex;
            height: 8.8rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 !important;
        }
    }

    color: var(--emui_text_primary);

    .box {
        height: 8.8rem;
        margin: 0 var(--emui_dimens_default_start);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .cardStyle();

        .left {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
            font-size: 1.8rem;
            .medium();
        }

        .center {
            flex: 1;
            display: flex;
            font-size: 1.8rem;
        }

        .right {
            height: 100%;
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 1.6rem;
            color: var(--emui_accent);
        }

        .loading {
            width: 6rem;
            height: 6rem;
        }

        @media only screen and(min-width: 600px) {
            .box {
                padding: 0 !important;
            }

            .left {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                overflow: hidden;
                font-size: 1.8rem;
                width: 33.33%;
                text-align: center;
                .medium();
            }

            .center {
                flex: 1;
                display: flex;
                text-align: center;
                width: 33.33%;
                justify-content: center;
                flex-direction: column;
                align-content: flex-start;
                font-size: 1.2rem;
                align-items: flex-start;
                color: var(--emui_mask_light);

                p {
                    width: 100%;

                    span {
                        color: var(--emui_mask_thick);
                        font-size: 2.4rem;
                        margin: 0 0.2rem 0.2rem 0;
                    }
                }
            }

            .right {
                height: 100%;
                flex: 1;
                width: 33.33%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 1.6rem;
                text-align: center;
                color: var(--emui_accent);
            }
        }

        .openOn {
            width: 6rem;
            height: 6rem;
        }

        .openOff {
            width: 6rem;
            height: 6rem;
        }

        .icon {
            .battery {
                display: flex;
                justify-content: center;
                align-content: center;

                img {
                    width: 2.2rem;
                    height: 2.2rem;
                }

                p {
                    font-size: 1.6rem;
                    color: var(--emui_text_primary);
                    line-height: 2.2rem;
                    margin-left: 0.4rem;

                    span {
                        font-size: 1.2rem;
                        color: var(--emui_text_secondary);
                    }
                }
            }
        }

        .lock-container {
            position: relative;

            &:active {
                opacity: 1;
            }

            .switch_icon {
                width: 5rem;
                height: 5rem;
                border-radius: 50%;

                &.scale_animation {
                    animation: scale 600ms cubic-bezier(0.2, 0, 0.2, 1);
                }
            }
        }
    }
}
</style>
  